import { Select, Input } from 'antd';
import { useEffect, useState } from 'react';

const { Option } = Select;

const DirSelect = (props) => {

    const {
        dirTree = [],
        value,
        onChange,
        allowClear = true
    } = props;

    const [dirsRoute, setDirsRoute] = useState([]);
    const [dirData, setDirData] = useState({});
    const [valueRoute, setValueRoute] = useState([]);


    useEffect(() => {
        // console.log(dirTree)
        if (dirTree) {
            loopTreeData(dirTree, (item, index, parent) => {
                if (item.isDir) {
                    dirData[item.id] = item;
                }
            })
            setDirData({ ...dirData })
            let currentDir = value ? dirData[value] : null;
            if (currentDir) {
                renderDirRoute(currentDir)
            } else {
                dirsRoute[0] = dirTree.filter(dir => dir.isDir);
                setDirsRoute([...dirsRoute])
            }
        }
    }, [dirTree, value])


    const findDirRoute = (dir) => {
        let dirIds = dir.routePath.split("_")
        return dirIds.map(id => dirData[id])
    }

    const loopTreeData = (data, callback) => {
        for (let i = 0; i < data.length; i++) {
            callback(data[i], i, data);
            if (data[i].children) {
                loopTreeData(data[i].children, callback);
            }
        }
    };

    const renderDirRoute = (currentDir) => {
        let dirRoutes = findDirRoute(currentDir);
        let dirsRoute = []
        let valueRoute = []
        dirRoutes.forEach((item, index) => {
            valueRoute[index] = item.id
            loopTreeData(dirTree, (dir, i, parent) => {
                if (dir.id === item.id) {
                    if (index === 0) {
                        dirsRoute.push(dirTree.filter(dir => dir.isDir));
                    } else {
                        console.log(dir, i, parent)
                        let children = parent.filter(dir => dir.isDir);
                        if (children && children.length > 0) {
                            dirsRoute.push(children);
                        }
                    }
                }
            })
        })
        if (currentDir.children) {
            let children = currentDir.children ? currentDir.children.filter(dir => dir.isDir) : []
            if (children && children.length > 0) {
                dirsRoute.push(children);
            }
        }
        setDirsRoute([...dirsRoute])
        setValueRoute(valueRoute)
    }

    const onDirChange = (dirId, index) => {
        let currentDir = dirData[dirId];
        renderDirRoute(currentDir)
        if (onChange) {
            onChange(dirId, currentDir.routePath.split("_"))
        }
    }

    // console.log(dirsRoute, dirData)
    return (
        <Input.Group compact>
            {dirsRoute.map((dirs, index) => {
                if (dirs) {
                    return <Select key={`${index}`} allowClear={allowClear} placeholder={"请选择文件夹"} value={valueRoute[index]} style={{ width: 120 }} onChange={(value) => onDirChange(value, index)}>
                        {dirs.map(dir => (
                            <Option key={dir.id}>{dir.title}</Option>
                        ))}
                    </Select>
                }
            })}
        </Input.Group>
    )

}

export default DirSelect;